<style lang="scss" scoped>
.chart{
    height:320px
}
.link{
    color:$primary-color;
    text-decoration: underline;
    cursor: pointer;
}
</style>
<template>
    <div class="center">
        <student-menu/>
        <div class="d-flex between px-2">
            <div>
                <h4>{{user.name}}同学，您好。 </h4>
                <p >
                    您的平均整体自评分为 <Rate :allow-half="evaluationScore%1>=0.5" disabled v-model="evaluationScore" />
                    <span class="ml-1">持有<Icon custom="iconfont icon-coin" class="color-yellow ml-1"/> {{user.gold}}枚</span>
                </p>
            </div>
            <p class="mt-2 link" @click="infoShow=true">修改个人信息</p>
        </div>
        <div class="box py-2">
            <div class="d-flex between">
                <h4 class="block-title">个人得分率趋势图</h4>
                <p class="pointer">
                    <span @click="option=1;change(7)" :class="{'color-yellow':option===1}" class="mr-1">最近7次</span>
                    <span @click="option=2;change(15)" :class="{'color-yellow':option===2}" class="mr-1">最近15次</span>
                    <span @click="option=3;change(0)" :class="{'color-yellow':option===3}" class="mr-3">全部</span>
                </p>
            </div>
            <div class="chart">
                <line-charts ref="lessonScoreCharts" v-if="lessonScoreData.length" :data="lessonScoreData" :attrs="lineChartsAttrs"/>
            </div>
            <h4 class="block-title">平均自我评价雷达图</h4>
            <div class="chart py-1">
                <radar-charts :attrs="radarChartsAttrs" :data="evaluationData" v-if="evaluationData"/>
            </div>
        </div>
         <Modal v-model="infoShow" title="修改个人信息"  @on-ok="handle_save" class-name="diy-modal" >
            <Form :model="user" :label-width="80">
                <FormItem label="学号">
                    <p>{{user.no}}</p>
                </FormItem>
                <FormItem label="姓名">
                    <Input v-model="user.name" class="w-200"></Input>
                </FormItem>
                <FormItem label="密码">
                    <Input v-model="user.pwd" type="password" class="w-200"></Input>
                    <span class="font-12 color-999 ml-1">为空则不更改密码</span>
                </FormItem>
                
                <FormItem label="性别">
                    <RadioGroup v-model="user.sex">
                        <Radio :label="1">男</Radio>
                        <Radio :label="0">女</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
import echarts from 'echarts'
import studentMenu from "@/components/studentMenu"
import lineCharts from "@/components/lineCharts"
import radarCharts from "@/components/radarCharts"
import {userinfo,userinfo_edit} from "@/common/sapi"
export default {
    data(){
        return {
            infoShow:false,
            user:{},
            option:1,
            evaluationScore:0,
            evaluationData:null,
            lessonScoreData:[],
            lessonScoreAllData:{},
            lineChartsAttrs:{
                xAxis:{
                    axisLabel:{
                        show:false
                    }
                },
                yAxis: {
                    min:0,
                    max:100
                },
                series:[{
                    color:'#a6c1ee',
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#a6c1ee'
                        }, {
                            offset: 1,
                            color: '#fff'
                        }])
                    },
                }]
            },
            radarChartsAttrs:{
                backgroundColor: 'transparent'
            }
        }
    },
    components:{
        studentMenu,
        lineCharts,
        radarCharts
    },
    methods:{
        handle_save(){
            userinfo_edit(this.user)
            .then(res=>{
                if(res){
                    this.$Notice.info({
                        title: '提交成功',
                        desc:'修改个人信息成功'
                    });
                    localStorage.setItem('userinfo',JSON.stringify(this.user))
                }
            })
        },
        change(length){
            let obj={}
            if(length){
                Object.keys(this.lessonScoreAllData).forEach((el,index)=>{
                    if(index<length)
                        obj[el]=this.lessonScoreAllData[el]
                })
            }else{
                obj=this.lessonScoreAllData
            }
            this.$refs.lessonScoreCharts.change([obj])
        }
    },
    created(){
        userinfo()
        .then(res=>{
            if(res){
                this.evaluationData=res.data.evaluations
                this.evaluationScore=res.data.evaluations['整体评价']
                this.user=res.data.info
                this.user.pwd=''
                const obj={},all_obj={}
                res.data.scores.forEach((el,index)=>{
                    all_obj[el.id]=el.accuracy
                    if(index<3)
                        obj[el.id]=el.accuracy
                })
                this.lessonScoreAllData=all_obj
                this.lessonScoreData=[{
                    data:obj
                }]
            }
        })
        
        
        
    }
}
</script>